<template>
  <div class="table">
    <div class="head">
      <div class="head-item" v-for="(item,index) in head" :key="index">
        {{ item.label }}
      </div>
      <div style="width: 14px;"></div>
    </div>
    <div class="body">
      <div>
        <div class="body-item" v-for="(dataItem, dataIndex) in data" :key="dataIndex">
          <div class="content-item" v-for="(headItem,headIndex) in head" :key="headIndex">
            {{ dataItem[headItem.key] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { HeadData } from '@/ui-kit/table/index';

export default defineComponent({
  name: 's-table',
  emits: [],
  props: {
    head: {
      type: Array as PropType<HeadData[]>,
      default: () => {
        return [];
      },
    },
    data: {
      type: Array as PropType<Record<string, any>[]>,
      default: () => {
        return [];
      },
    },
  },
  setup(props, { emit }) {

  },
});
</script>
<style scoped lang="scss">
.table {
  overflow: hidden;
  margin: 5px;
  display: flex;
  flex-direction: column;

  .head {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: row;
    background-color: #f2f2f2;
    border: .5px solid #999999;

    .head-item {
      box-sizing: border-box;
      padding: 5px;
      border-left: .5px solid #999999;
      flex: 1;
      text-align: left;
    }

    .head-item:first-child {
      border-left: transparent;
    }
  }


  .body {
    flex: 1;
    border: .5px solid #999999;
    border-top: transparent;
    overflow-y: scroll;

    .body-item {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex: 1;
      border-bottom: .5px solid #999999;

      .content-item {
        box-sizing: border-box;
        padding: 5px;
        border-right: .5px solid #999999;
        flex: 1;
        text-align: left;
      }

      .content-item:last-child {
        border-right: transparent;
      }
    }
  }
}
</style>
